<template>
  <div class="box">
    <ul>
      <li v-for="(img, index) in imgList" :key="index">
        <!-- <img :src="img" alt="" /> -->
        <img v-lazy="img" />
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
import VueLazyLoad from "./vue-lazyload.js";
import Vue from "vue";
import logo from "@/assets/logo.png";
Vue.use(VueLazyLoad, {
  loading: logo,
  preload: 1.2, // 在我们屏幕中1.2的位置的图片先加载，其他的等待加载
});
export default {
  created() {
    // ajax是异步的
    // 服务端渲染支持created， 所以希望大家把请求写到这里保持和服务端一致
  },
  data() {
    return {
      imgList: [],
    };
  },
  async mounted() {
    let { data: imgs } = await axios.get("http://localhost:3000/api/list");
    console.log(imgs);
    this.imgList = imgs;
  },
};
</script>

<style>
.box {
  width: 400px;
  height: 400px;
  overflow: scroll;
}
img {
  width: 100px;
  height: 150px;
}
</style>
